<template>
    <div class="homepage">
        <div class="homepage_Carousel">
            <video width="100%" height="490px"  autoplay loop muted class="f" id="bgvid">
                <source src="https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDkvZmYwMjQ2ODI4OGE2M2Q3YTNkNTQ0YmQxYjkxYzRhNjUud2VibQ_p_p100_p_3D_p_p100_p_3D.webm" type="video/mp4">
                <source src="https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMjAvMDkvZmYwMjQ2ODI4OGE2M2Q3YTNkNTQ0YmQxYjkxYzRhNjUud2VibQ_p_p100_p_3D_p_p100_p_3D.webm" type="video/ogg">
            </video>
            <p class="view-t">能把简单的事情做到极致，就是对工业的巨大贡献</p>
        </div>
        <div class="section">
            <div class="section_l">
                <div class="section_list animate__animated animate__fadeInUp animate__delay-0.5s" v-for="(i,$index) in arr" :key="$index">
                    <div class="section_list1">
                        <div class="section_list_img"><img :src="i.i" alt=""></div>
                        <span>{{i.t}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="section2">
            <div class="section2_l">
                <div class="section2_title">
                    <div class="section2_title_l">
                        <h3>机械设备</h3>
                    <span>Machinery and equipment</span>
                    </div>
                    <router-link to="/machile1">
                        <div class="section2_title_r">查看更多 →</div>
                    </router-link>
                </div>
                <div class="section2_l_content">
                    <div class="section2_l_content1">
                        
                            <div class="section2_l_content1_list animate__animated animate__fadeInUp animate__delay-0.5s"  v-for="(i,$index) in arr1" :key="$index">
                                <router-link :to="'/asdfgh'+i.t">
                                    <div class="section2_l_content1_list_img"><img :src="i.i" alt=""></div>
                                    <div>{{i.t}}</div>
                                    <div>{{i.c}}</div>
                                </router-link>
                            </div>
                    
                        
                    </div>
                </div>
                <router-link to="/machile1">
                    <div class="xiangqing">
                        了解详情 →
                    </div>
                </router-link>
            </div>
        </div>
        <product>
                    <h3 slot="font">产品中文标题</h3>
                    <h1 slot="font">PRODUCT</h1>
                    <span slot="font">01/机械零部件</span>
                    <p slot="font">这是是产品的描述，您可以根据自己的实际需要进行修改。这是是产品的描述，您可以根据自己的实际需要进行修改。这是是产品的描述，您可以根据自己的实际需要进行修改。这是是产品的描述，您可以根据自己的实际需要进行修改。</p>
                    <router-link to="/hexin"  slot="font"> 
                            <div>点击按钮</div>
                    </router-link>
            <img slot="primg" class="an img" src="https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDgvNzExMDM1MzRlM2JkMmZiOGE5Yjg4YmY4NzIyYzY3MDMtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
        </product>
        <div class="shu">
            <div class="shu_title">
                <div class="shu_title_l">
                    <h3>新闻质询</h3>
                    <span>News</span>
                </div>
                <div class="shu_title_r">查看更多 →</div>
            </div>
            <br/>
            <div class="shu_content">
                <shu/>
            </div>
        </div>
        <product>
                    <h3 slot="font">产品中文标题</h3>
                    <h1 slot="font">PRODUCT</h1>
                    <span slot="font">01/机械零部件</span>
                    <p slot="font">这是是产品的描述，您可以根据自己的实际需要进行修改。这是是产品的描述，您可以根据自己的实际需要进行修改。这是是产品的描述，您可以根据自己的实际需要进行修改。这是是产品的描述，您可以根据自己的实际需要进行修改。</p>
                    <router-link to="/hexin"  slot="font"> 
                            <div>点击按钮</div>
                    </router-link>
                    
           <img slot="primg" src="https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDgvNDQwMTgxMjQ0ZTYwMTkxNTkwZjZiYzkxNDUwNjdkNmYtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp" alt="">
        </product>
        <div class="core">
            <div class="core_title">
                <div class="section2_title">
                    <div class="section2_title_l">
                        <h3>核心团队</h3>
                    <span>Team</span>
                    </div>
                    <router-link to="/machile4">
                        <div class="section2_title_r">查看更多 →</div>
                    </router-link>
                </div>
            </div>
                <br/>
                <div class="core_content">
                    <div class="core_content_list" :style="{left:-index*33+'%'}">
                        <router-link to="/jieshao">
                            <div class="core_content_list1 animate__animated animate__fadeInUp animate__delay-0.5s" v-for="(i,$index) in arr2" :key="$index">
                                <div class="core_content_list1_img"><img :src="i.i" alt=""></div>
                                <h3>{{i.t}}</h3>
                                <span>{{i.c}}</span>
                            </div>
                        </router-link>
                    </div>
                    <div class="left" @click="lefts"><i class="el-icon-arrow-left"></i></div>
                    <div class="right"><i class="el-icon-arrow-right"></i></div>
                </div>
                <router-link to="/machile4">
                    <div class="xiangqing">
                        了解详情 →
                    </div>
                </router-link>
        </div>
        <div class="service">
            <div class="nn">
                <div class="service_title">
                <div class="section2_title">
                    <div class="section2_title_l">
                        <h3>核心团队</h3>
                    <span>Team</span>
                    </div>
                    <router-link to="/machile4">
                        <div class="section2_title_r">查看更多 →</div>
                    </router-link>
                </div>
            </div>
            <div class="servicess_content">
                    <div class="servicess_content_list" v-for="(i,$index) in bbb" :key="$index">
                        <div class="servicess_content_list_img "> 
                            <div class="servii">
                            <i :class=" i.icon"></i>
                            </div>
                        </div>
                        <h3>{{i.t}}</h3>
                        <span>{{i.c}}</span>
                    </div>
            </div>  
            </div>
            
        </div>
            <div class="zuihou">
                <footers>
                  <h5 slot="con_title">项目服务<span>Service</span></h5>
                  <div slot="con_c" class="con4-top-right">
                  查看更多
                </div>
                </footers>
            </div>
    </div>
</template>
<script>
export default {
    data() {
        return{
            l:'<',
            arr:[
                {i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS8wOWQwMjk2ODQ0ZWQ0YTAyMDQ4MDVmZTE2YjFjYzY4MC04MHg4MC05MC53ZWJw.webp',t:'标题01'},
                {i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS81OTliZGM3YmM0ODMyNjUxYjAyMjg2M2JmY2IzNGIwNS04MHg4MC05MC53ZWJw.webp',t:'标题02'},
                {i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS9jMTYwMDc5MTJiNzZiMDc4NmRlNTVlNzQwY2M4MWYxZC04MHg4MC05MC53ZWJw.webp',t:'标题03'},
                {i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS85M2ViZTI1MTU2Mjk2NzJjN2FlMjgzNDg0ZmNmMDdhNC04MHg4MC05MC53ZWJw.webp',t:'标题04'},
                {i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS9jMTYwMDc5MTJiNzZiMDc4NmRlNTVlNzQwY2M4MWYxZC04MHg4MC05MC53ZWJw.webp',t:'标题05'},
                {i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS85M2ViZTI1MTU2Mjk2NzJjN2FlMjgzNDg0ZmNmMDdhNC04MHg4MC05MC53ZWJw.webp',t:'标题06'}
            ],
            arr1:[
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS9lOGFiYjg4ZTkwYjcxMjM2YzZjMDc3MjVmMTFmZGJhNy00MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp',
                    t:'机械设备01',
                    c:'mechanical equiprment',
                    path:'/asdfgh'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS85MGE1MzAyN2I3YjZiMDkyMDczZDdkMDViMTQ4OTg0OC00MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp',
                    t:'机械设备02',
                    c:'mechanical equiprment',
                    path:'/asdfgh'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS8xMGJjNzAxZmVhZTI2MzMzOWU4YWE0OGNmMDkwNTY3My00MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp',
                    t:'机械设备03',
                    c:'mechanical equiprment',
                    path:'/asdfgh'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cDovLzU5YTdjNDkyN2E0YzcudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxNy8wOS9lOGFiYjg4ZTkwYjcxMjM2YzZjMDc3MjVmMTFmZGJhNy00MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp',
                    t:'机械设备04',
                    c:'mechanical equiprment',
                    path:'/asdfgh'
                }
            ],
            arr2:[
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvMTAyMTA5YTkyYmZmZmU4NjNkOTRmOTBkZjBkOWE4OTctMjAweDIwMC05MC53ZWJw.webp',
                    t:'技术工程师',
                    c:'在企业级产品技术研发具有十多年的经验,曾开发多款百万级企业产品',
                    c1:'在企业级产品技术研发具有十多年的经验,曾开发多款百万级企业产品'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvZjlmMTExNTZlMzE3YzYyNzczYjIyYWRjOGZkY2E2NTktMjAweDIwMC05MC53ZWJw.webp',
                    t:'技术工程师',
                    c:'在企业级产品技术研发具有十多年的经验,曾开发多款百万级企业产品',
                    c1:'在企业级产品技术研发具有十多年的经验,曾开发多款百万级企业产品'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvYTIxY2VjYjlhODcxNGQ1NTk2N2ZiYTA2ZGIwYTNkNmEtMjAweDIwMC05MC53ZWJw.webp',
                    t:'技术工程师',
                    c:'在企业级产品技术研发具有十多年的经验,曾开发多款百万级企业产品'
                },
                {
                    i:'https://ccdn.goodq.top/caches/50e30cb4a329dcd0a402456b4dd0fd85/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDkvYjE2YWRhZDEzYjI3NzczYjViZTZmMjU3ZDA2MDNjMWMtMjAweDIwMC05MC53ZWJw.webp',
                    t:'技术工程师',
                    c:'在企业级产品技术研发具有十多年的经验,曾开发多款百万级企业产品'
                }
            ],
            bbb:[
                {c:'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素',t:'格式刷功能',icon:'iconfont icon-wifi'},
                {c:'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素',t:'格式刷功能',icon:'iconfont icon-liwu'},
                {c:'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素',t:'格式刷功能',icon:'iconfont icon-laba'},
                {c:'您可以双击这里或者点击编辑按钮来修改内容。您还可以添加图标，按钮，图片等常用元素',t:'格式刷功能',icon:'iconfont icon-bijibendiannao'}
            ],
            index:0
        }
    },
    methods:{
        lefts(){
            this.index++
            console.log(this.index);
            if(this.index>this.arr2.length-3){
                this.index=0
            }
        }
    }
}
</script>
<style>
*{
       text-decoration: none;
}
.homepage{
    width: 100%;
}
.homepage_Carousel{
    width: 100%;
    height: 490px;
    position: relative;
}
.f{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -9999;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
  background-color:skyblue;
  }
   .v{
     position: relative;
    width: 100%;
    overflow: hidden;
    z-index: -10000; 
  background-color:skyblue;
   }
  .v:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1000;
    top: 0;
    left: 0;
    background: rgba(90,20,10,.2);
   }
   .view-t{
     color:white;
     font-size: 60px;
    font-weight: normal;
    font-style: normal;
    padding: 0 5%;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
   }
   .section{
       width: 100%;
       height: 340px;
       padding-top: 80px;
       box-sizing: border-box;
   }
   .section_l{
       width: 90%;
       margin: 0 auto;
   }
   .section_list{
       width: 16.6666%;
       border-right: 1px solid #ccc;
       height: 170px;
       display: inline-block;
       padding-top: 30px;
       box-sizing: border-box;
       position: relative;
   }
   .section_list1{
       position: absolute;
       top: 30px;
       left: 30%;
       transition: all .5s; 

   }
   .section_list1:hover{
       top:0;
   }
   .section_list_img{
       width: 100%;
       height: 80px;
   }
   .section_list_img>img{
       height: 80px;
       margin: 0 auto;
       display: block;
   }
   .section_list1>span{
       font-size: 20px;
       text-align: center;
       display: block;
       line-height: 38px;
   }
   .section2{
       width: 100%;
       height: 680px;
       background: rgba(0, 0, 0, 0.1);
       padding-top: 120px;
       box-sizing: border-box;
       margin-bottom: 0;
   }
   .section2_l{
       width: 70%;
       height: 490px;
       margin: 0 auto;
   }
   .section2_title{
       width: 100%;
       height: 50px;
       margin-bottom: 20px;
   }
   .section2_title_l{
       float: left;
   }
   .section2_title_l>h3{
       font-size: 24px;
   }
   .section2_title_r{
       font-size: 14px;
       color: #ccc;
       float: right;
       margin-bottom: 0;
   }
   .section2_title_l>span{
       display: block;
       color: #cf372d;
   }
   .section2_l_content{
       width: 100%;
   }
   .section2_l_content1{
       width: 100%;
       height: 330px;
       display: flex;
       position: relative;
   }
   .section2_l_content1_list{
       height: 330px;
       margin-right: 3%;
       background: #fff;
       overflow: hidden;
       flex: 1;
   }
   .section2_l_content1_list>a:hover>.section2_l_content1_list_img>img{
       transition: all .5s;
       transform: scale(1.1);
   }
   .section2_l_content1_list_img{
       width: 100%;
       height: 224px;
       margin-bottom: 10px;
       overflow: hidden;
   }
   .section2_l_content1_list_img>img{
       width: 100%;
       height: 224px;
   }
   .section2_l_content1_list>a>div{
       font-size: 14px;
       color: #999999;
       text-align: center;
       line-height: 24px;
   }
   .xiangqing{
       width: 200px;
       height: 60px;
       text-align: center;
       line-height: 60px;
       font-size: 24px;
       border: 1px solid #cf372d;
       color: #cf372d;
       margin: 0 auto;
       padding-bottom: 0;
   }
   .xiangqing:hover{
       background: #cf372d;
       color: #fff;
       transition: all .5s;
   }
   .shu{
       width: 100%;
       padding-top: 50px;
       padding-bottom: 20px;
       box-sizing: border-box;
       background-image: url(https://ccdn.goodq.top/caches/50e30cb…/aHR0cHM6Ly81OWE3YzQ5MjdhNGM3LnQ3My5xaWZlaXllLmNvbS9xZnktY29udGVudC91cGxvYWRzLzIwMTcvMDgvZGZkODYwZGE3OWJiMTk3NTk4YTZlMDIyMDc3YjBlNmMtOTAud2VicA_p_p100_p_3D_p_p100_p_3D.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
       margin-bottom: 0;
   }
   .shu_title{
       width: 80%;
       height: 7%;
       margin: 0 auto;
   }
   .shu_title_l{
       float: left;
   }
   .shu_title_l>h3{
       font-size: 24px;
       color: #fff;
   }
   .shu_title_l>span{
       font-size: 12px;
       color: #fff;
   }
   .shu_title_r{
       width: 100px;
       height: 40px;
       border: 1px solid #fff;
       text-align: center;
       line-height: 40px;
       float: right;
       font-size: 18px;
       color: #fff;
   }
   .shu_content{
       width: 80%;
       margin: 0 auto;
       margin-top: 100px;
   }
   .core{
       width: 100%;
       height: 700px;
       padding-top: 50px;
   }
   .core>a{
       margin-bottom: 0;
   }
   .core_title{
       width: 60%;
       margin: 0 auto;
   }
   .core_content{
       width: 80%;
       height: 400px;
       margin: 0 auto;
       overflow: hidden;
       position: relative;
       margin-top:100px;
   }
   .core_content_list{
       height: 400px;
       position: absolute;
       left: 0;
       top: 0;
   }
   .core_content_list1{
       width: 30%;
       height: 400px;
       display: inline-block;
       margin-left: 3%;
   }
   .core_content_list1_img{
       width: 200px;
       height: 200px;
       margin: 0 auto;
       border-radius: 50%;
       overflow: hidden;
    
   }
   .core_content_list1_img>img{
       width: 200px;
       height: 200px;
       display: block;
   }
   .core_content_list1>h3{
       text-align: center;
       line-height: 38px;
       color: #000;
   }
   .core_content_list1>span{
       display: block;
        padding: 0 30px;
        text-align: center;
        line-height: 30px;
       color: #000;
   }
   .left{
       width: 50px;
       height: 100px;
       position: absolute;
       left: 0;
       top: 50%;
       font-size: 50px;
       margin-top: -50px;
   }
   .right{
       width: 50px;
       height: 100px;
       position: absolute;
       right: 0;
       top: 50%;
       font-size: 40px;
       margin-top: -50px;
   }
   .service{
       width: 100%;
       height: 550px;
       background: rgba(0, 0, 0, 0.05);
       padding-top: 100px;
       /* box-sizing: border-box; */
   }
   .nn{
       width: 1280px;
       margin: 0 auto;
   }
   .service_title{
       width: 60%;
   }
   .servicess_content{
       height: 180px;
       padding-bottom: 0;
       display: flex;
   }
   .servicess_content_list{
       flex: 1;
    }
   .servicess_content_list:hover{
       transform: translatey(-20px);
       transition: 1s;
   }
   .servicess_content_list_img{
       height: 50px;
       font-size: 60px;
   }
   .servii{
       width: 60px;
       height: 60px;
       border: 1px solid #cf372d;
       padding-bottom: 0;
       border-radius: 50%;
       margin: 0 auto;
   }
   .servii>i{
       width: 60px;
       height: 60px;
       border: none;
       color: #cf372d;
        margin: 0 auto;
        line-height: 60px;
        display: block;
   }
   .servii>i::before{
       font-size: 45px;
   }
   .servicess_content_list>h3{
       text-align: center;
   }
   .servicess_content_list>span{
       font-size: 12px;
       color: #ccc;
       padding: 0 10px;
       box-sizing: border-box;
       text-align: center;
   }
   .zuihou{
       width: 100%;
       height: 600px;
   }
</style>